<!-- components/image-modal/image-modal.vue -->
<template>
  <view class="modal-container" style="background-color: rgba(0, 0, 0, 1.7)" v-if="showModal" @touchmove.stop.prevent>
    <!-- 黑色背景层，点击可关闭 -->
    <view class="modal-mask"></view>
    
	
    <!-- 弹窗内容 -->
	
	
    <view class="modal-content" :style="{backgroundImage: 'url('+image[bgi]+')' }" 
				style="background-size:65%;background-repeat:no-repeat;background-position:center;"
				>
      <view style="margin: 80rpx;">
		  <!-- 关闭按钮 -->
		  <view class="close-btn" @click="handleClose">
		    <text class="close-icon">×</text>
		  </view>
		  
		  <!-- 图片区域 - 修改了这部分结构 -->
		  <view class="image-wrapper">
		    <image class="modal-image" :src="imageUrl" 	show-menu-by-longpress mode="widthFix" ></image>
		  </view>
	  </view>
    </view>
  </view>
</template>

<script>
// 脚本部分保持不变
export default {
  name: "ImageModal",
  props: {
    show: {
      type: Boolean,
      default: false
    },
    imageUrl: {
      type: String,
      default: "https://sp.x-fmt.com//uploads/attach/2025/07/20250725/6ccef2a7a6fcac3f0a01234ef48e7c88.jpg"
    },
	bgi:{
		type: String,
		default: '1'
	}
  },
  data() {
    return {
      showModal: this.show,
	  image:{
		  "1":"https://sp.x-fmt.com//uploads/attach/2025/07/20250725/baa2c790a7fd716032c86556e13e4cf6.png",
		  "2":"https://sp.x-fmt.com//uploads/attach/2025/07/20250725/baa2c790a7fd716032c86556e13e4cf6.png",
		  "3":"https://sp.x-fmt.com//uploads/attach/2025/07/20250725/9c76e4211d4314e3ea83aa8766527232.png"
	  },
    };
  },
  watch: {
    show(newVal) {
      this.showModal = newVal;
    }
  },
  methods: {
    handleClose() {
      this.showModal = false;
      this.$emit("update:show", false);
      this.$emit("close");
    }
  }
};
</script>

<style lang="scss" scoped>
/* 弹窗容器 */
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* 遮罩层 */
  .modal-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
  }
  
  /* 弹窗内容 */
  .modal-content {
    position: relative;
    width: 85%;
    background-color: #fff;
    border-radius: 12px;
    padding: 15px;
    box-sizing: border-box;
    z-index: 10000;
    display: flex;
    flex-direction: column;
  }
  
  /* 关闭按钮 */
  .close-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
  }
  
  .close-icon {
    font-size: 18px;
    color: #333;
  }
  
  /* 图片容器 - 新增样式 */
  .image-wrapper {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .modal-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
  }
}


</style>